<template>
	<el-container>
		<el-main class='x-main-edit'>
			<el-form ref="form" :rules="form_rules" :model="form" size="mini" label-width="15%">
				<el-tabs type="border-card" v-model="page_tag">
					<!---->
					<!---->
					<el-tab-pane :label="page_info.title" name="1">
						<el-form-item label="车型" prop="csku_cspu_id">
							<el-select :disabled="page_info.is_admin_edit" filterable v-model="form.csku_cspu_id" placeholder="请选择">
								<el-option v-for="item in page_info.list_spu"
										   :label="item.cspu_name"
										   :key="item.cspu_id"
										   :value="item.cspu_id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="车牌号" prop="csku_car_no" ref="csku_car_no">
							<el-input v-model="form.csku_car_no" class="x-input-60" placeholder="粤B-DJ5920"></el-input>
						</el-form-item>
						<el-form-item label="设备号" prop="csku_device_no" ref="csku_device_no">
							<el-input v-model="form.csku_device_no" class="x-input-60"></el-input>
							<div class="x-alert">
								<span>连接硬件设备用，唯一</span>
							</div>
						</el-form-item>
						<el-form-item label="图片">
							<x-upload-imgs ref="uploadEle" :sortable="true" :max-num="1"
										   :rules="({ maxSize: 0.5})"
										   :img_root="page_info.static_file_root"
										   v-bind:value.sync="form.csku_pic"
										   :remote-fuc="g_page.funcUpdateImg"
										   :before-upload="g_page.funcUpdateImgBefore"/>
						</el-form-item>
						<el-form-item label="当前停放网点" prop="csku_real_cnetwork_id">
							<div v-if="form.csku_real_cnetwork_id!=''">{{ form.cnetwork_name }}</div>
							<div style="color:red;" v-else>暂无</div>
						</el-form-item>
						<el-form-item label="指定停车网点" prop="csku_lock_network">
							<el-switch v-model="form.csku_lock_network"
									   active-color="#13ce66"
									   :active-value="1" active-text="是"
									   :inactive-value="0" inactive-text="否">
							</el-switch>
						</el-form-item>
						<el-form-item label="上下架" prop="csku_enable">
							<div v-if="form.csku_enable=1">上架</div>
							<div style="color:red;" v-else>下架</div>
						</el-form-item>
						<el-form-item label="用车密码">
							{{ form.csku_real_pwd }}
						</el-form-item>
						<el-form-item label="车辆状态">
							<SkuState :sku="form"></SkuState>
						</el-form-item>
						<el-form-item label="实时信息">
							<SkuInfo :hide_location="false" :sku="form"></SkuInfo>
						</el-form-item>
						<el-form-item label="车辆类型">
							{{ form.cspu_type_car }}
						</el-form-item>
						<el-form-item label="备注" prop="csku_remak">
							<el-input v-model="form.csku_remak" class="x-input-60"></el-input>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane label="车辆信息" name="5">
						<el-form-item label="发动机号" prop="csku_engine_num">
							<el-input v-model="form.csku_engine_num" class="x-input-60"></el-input>
						</el-form-item>
						<el-form-item label="车架号" prop="csku_frame_num">
							<el-input v-model="form.csku_frame_num" class="x-input-60"></el-input>
						</el-form-item>
						<el-form-item label="行驶证图片">
							<x-upload-imgs ref="uploadEle" :sortable="true" :max-num="2"
										   :rules="({ maxSize: 2})"
										   :img_root="page_info.static_file_root"
										   v-bind:value.sync="form.csku_pic_license"
										   :remote-fuc="g_page.funcUpdateImg"
										   :before-upload="g_page.funcUpdateImgBefore"/>
						</el-form-item>
						<el-form-item label="保单图片">
							<x-upload-imgs ref="uploadEle" :sortable="true" :max-num="4"
										   :rules="({ maxSize: 2})"
										   :img_root="page_info.static_file_root"
										   v-bind:value.sync="form.csku_pic_safe"
										   :remote-fuc="g_page.funcUpdateImg"
										   :before-upload="g_page.funcUpdateImgBefore"/>
						</el-form-item>
						<el-form-item label="流量号" prop="csku_flow_num">
							<el-input v-model="form.csku_flow_num" class="x-input-60"></el-input>
						</el-form-item>
						<el-form-item label="保险时间" prop="csku_insure_date">
							<el-date-picker
								style="width: 200px;"
								v-model="form.csku_insure_date"
								type="date"
								placeholder="选择保险时间"
								:picker-options="g_cc.picker_options"
								default-time="00:00:00"
								value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="年检时间" prop="csku_year_check_date">
							<el-date-picker
								style="width: 200px;"
								v-model="form.csku_year_check_date"
								type="date"
								placeholder="选择年检时间"
								:picker-options="g_cc.picker_options"
								default-time="00:00:00"
								value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane label="停车信息" name="3">
						<el-form-item label="图片">
							<x-upload-imgs ref="uploadEle" :sortable="true" :max-num="1"
										   :rules="({ maxSize: 0.5})"
										   :img_root="page_info.static_file_root"
										   v-bind:value.sync="form.csku_stop_pic"
										   :remote-fuc="g_page.funcUpdateImg"
										   :before-upload="g_page.funcUpdateImgBefore"/>
						</el-form-item>
						<el-form-item label="说明">
							<el-input type="textarea" v-model="form.csku_stop_desc" class="x-input-60"></el-input>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane label="高级" name="2">
						<el-form-item label="API KEY" prop="csku_api_key" ref="csku_api_key">
							<el-input :disabled="true" v-model="form.api_key" class="x-input-60"></el-input>
							<el-button :disabled="!form.online" type="success" @click="funcReset" size="mini">重置
							</el-button>
						</el-form-item>
						<el-form-item label="操作">
							<el-button :disabled="!form.online" type="primary" @click="funcSendCmd('find_car')" size="mini">
								鸣笛
							</el-button>
							<el-button :disabled="!form.online" type="primary" @click="funcSendCmd('unlock_car')" size="mini">
								开门
							</el-button>
							<el-button :disabled="!form.online" type="primary" @click="funcSendCmd('lock_car')" size="mini">
								锁门
							</el-button>
							<el-button :disabled="!form.online" type="primary" @click="funcSendCmdConfirm('use_car')" size="mini">
								用车（获取临时密码）
							</el-button>
						</el-form-item>
						<el-form-item label="检查签名等级" prop="csku_api_check_level" ref="csku_api_check_level">
							<el-select filterable v-model="form.csku_api_check_level" placeholder="请选择">
								<el-option v-for="(item,key) in page_info.list_api_check_level"
										   :label="item"
										   :key="key"
										   :value="key">
								</el-option>
							</el-select>
							<div class="x-alert">
								<span>简单检查：检查签名</span><br/>
								<span>严格检查：检查签名与时间</span><br/>
							</div>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
				</el-tabs>
			</el-form>
			<!---->
			<!---->
			<!-- 按钮部分 -->
			<div class="save_wrap">
				<el-button @click="g_page.funcBack" size="mini">返回</el-button>
				<el-button type="success" @click="g_page.funcSave" size="mini">保存</el-button>
				<el-checkbox v-if="page_info.is_admin_edit" style="margin-left: 10px;" label="保存后停留" v-model="checked"/>
			</div>
			<!---->
			<!---->
			<!---->
		</el-main>
	</el-container>
</template>

<script>
	import SkuInfo from '@/views/app_wxapp/app_car/components/SkuInfo'
	import SkuState from '@/views/app_wxapp/app_car/components/SkuState'

	export default {
		components: {
			SkuInfo,
			SkuState
		},
		data() {
			let page_data = {}
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			//
			return page_data
		},
		mounted() {
			console.log('mounted')
			console.log(this.$route.query)

			this.g_page.funcSetVue(this)
			//
			this.g_page.funcSetApiUrlEdit('/xadmin/app_car/app_car__sku__edit')
			this.g_page.funcSetApiUrlSave('/xadmin/app_car/app_car__sku__edit/save')
			let page = this
			//验证
			this.form_rules = {
				__test: [{
					required: true,
					message: '请输入原密码',
					trigger: 'blur'
				}]
			}

			let data = this.$route.query
			this.g_page.funcEdit(data)
		},
		methods: {
			funcShowDialogAfter() {
				console.log('funcShowDialogAfter')

				// this.$nextTick(() => {
				// 	this.$refs['abc_long_00'].setContent(this.form.abc_long_00)
				// })
			},
			//保存之前
			funcSaveBefore(data) {
				console.log('funcSaveBefore', data)

				// data.abc_str_00 = this.g_page.funcImgArrToStr(data.abc_str_00_imgs)

				return data
			},
			//重置api key
			funcReset() {
				this.g_cc.func_confirm('确定重置api key？', () => {
					this.g_cc.func_axios({
						url: '/xadmin/app_car/app_car__sku__edit/funcReset',
						data: {
							sku_id: this.form.id
						},
						success: (res) => {
							//
							if (res.data.errcode == 0) {
								this.g_cc.func_alert('命令发送成功', 'success', () => {
									this.form.api_key = res.data.api_key
								})
							} else {
								this.g_cc.func_alert(res.data.errmsg, 'error')
							}
						}
						//
					})
				})
			},
			funcSendCmdConfirm(cmd) {
				this.g_cc.func_confirm('确定？', () => {
					this.funcSendCmd(cmd)
				})
			},
			//发送用车命令
			funcSendCmd(cmd) {
				let page = this
				// debugger
				this.g_cc.func_axios({
					url: '/xadmin/app_car/app_car__sku__edit/funcSendCmd',
					data: {
						sku_id: page.form.id,
						cmd: cmd
					},
					success: (res) => {
						//
						if (res.data.errcode == 0) {
							this.g_cc.func_alert('命令发送成功', 'success', () => {
								if (cmd == 'use_car') {
									this.g_page.funcReload()
								}
							})
						} else {
							this.g_cc.func_alert(res.data.errmsg, 'error')
						}
					}
					//
				})
			}
			/////////////////////////
		}
	}
</script>
